<template>
  <!-- 评估模型维护 -->
  <div class="app-container2 pinggumoxingweihu">
    <div class="left_box">
      <commonTree2 />
    </div>
    <div class="right-box">
      <div class="modal-search-box">
        <div class="top">
          <div class="left">
            <div class="form-item">
              <el-button
                class="js_common_btn colorStyle form-btn"
                icon="el-icon-download"
                >导入</el-button
              >
            </div>
          </div>
          <div>
            <el-button
              class="js_common_btn colorStyle form-btn"
              icon="el-icon-s-order"
              >保存</el-button
            >
            <el-button
              class="js_common_btn colorStyle form-btn"
              icon="el-icon-upload2"
              >导出</el-button
            >
          </div>
        </div>
      </div>
      <div class="right_main">
        <div class="right_main_bottom">
          <el-table
            class="jk_common_table003"
            :data="tableData"
            height="style"
            border
            style="width: 100%; height: 100%"
          >
            <el-table-column prop="id" label="序号" width="180" align="center">
            </el-table-column>
            <el-table-column prop="ms" label="故障模式" width="200" align="center">
            </el-table-column>
            <el-table-column prop="bh" label="故障模式编号" align="center">
            </el-table-column>
            <el-table-column prop="type" label="设备类型" align="center">
            </el-table-column>
            <el-table-column prop="typeId" label="设备类型编号" align="center">
            </el-table-column>
            <el-table-column prop="sbdj" label="设备严酷度等级" align="center">
            </el-table-column>
            <el-table-column
              prop="gzgl"
              label="故障发生概率等级 "
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="gzjcdj"
              label="故障检测难度等级"
              align="center"
            >
            </el-table-column>
            <el-table-column prop="yxj" label="软件风险优先级" align="center">
            </el-table-column>
          </el-table>
          <div class="main_fenye">
            <el-pagination
              class="js_common_fenyeqi"
              :current-page="1"
              :page-size="10"
              :pager-count="5"
              :append-to-body="false"
              popper-class="js_common_fenyeqi_popper"
              layout="prev, pager, next, sizes, jumper"
              :total="400"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import commonTree2 from "../../../components/commonTree2";
export default {
  components: { commonTree2 },
  data() {
    return {
      tableData: [
        {
          id: "1",
          ms: "CPU负荷高",
          bh: "CS-01-01",
          type: "通讯服务器",
          typeId: "CS",
          sbdj: "轻微",
          gzgl: "A",
          gzjcdj: "1",
          yxj: "优先级低",
        },
        {
          id: "2",
          ms: "型号不兼容",
          bh: "CS-02-01",
          type: "通讯服务器",
          typeId: "CS",
          sbdj: "轻微",
          gzgl: "A",
          gzjcdj: "1",
          yxj: "优先级低",
        },
        {
          id: "3",
          ms: "内存占用率高",
          bh: "CS-02-02",
          type: "通讯服务器",
          typeId: "CS",
          sbdj: "轻微",
          gzgl: "B",
          gzjcdj: "1",
          yxj: "优先级低",
        },
        {
          id: "4",
          ms: "型号不兼容",
          bh: "CS-03-01",
          type: "通讯服务器",
          typeId: "CS",
          sbdj: "一般",
          gzgl: "B",
          gzjcdj: "3",
          yxj: "优先级中",
        },
        {
          id: "5",
          ms: "硬盘空间使用率高",
          bh: "CS-03-02",
          type: "通讯服务器",
          typeId: "CS",
          sbdj: "一般",
          gzgl: "A",
          gzjcdj: "4",
          yxj: "优先级中",
        },
        {
          id: "6",
          ms: "一层网卡速率过低",
          bh: "CS-04-01",
          type: "通讯服务器",
          typeId: "CS",
          sbdj: "严重",
          gzgl: "C",
          gzjcdj: "4",
          yxj: "优先级高",
        },
        {
          id: "7",
          ms: "二层网卡速率过低",
          bh: "CS-04-02",
          type: "通讯服务器",
          typeId: "CS",
          sbdj: "严重",
          gzgl: "C",
          gzjcdj: "2",
          yxj: "优先级高",
        },
        {
          id: "8",
          ms: "服务器与控制网A通讯故障",
          bh: "CS-04-03",
          type: "通讯服务器",
          typeId: "CS",
          sbdj: "灾难",
          gzgl: "D",
          gzjcdj: "2",
          yxj: "优先级高",
        },
        {
          id: "9",
          ms: "服务器与控制网B通讯故障",
          bh: "CS-04-04",
          type: "通讯服务器",
          typeId: "CS",
          sbdj: "灾难",
          gzgl: "D",
          gzjcdj: "1",
          yxj: "优先级高",
        },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
$modelCreatebgColor: #0e2141;
.pinggumoxingweihu {
  width: 100%;
  display: flex;
  ::v-deep .colorStyle {
    span {
      color: #ccc !important;
    }
  }
  .left_box {
    flex: 0 0 auto;
  }
  .right-box {
    flex: 1 1 auto;
    width: 0;
    margin-left: 20px;
    display: flex;
    flex-direction: column;
    border: 1px solid #335174;
    box-sizing: border-box;
    .form-btn {
      width: 80px;
      color: #cccc;
    }

    .modal-search-box {
      flex: 0 0 auto;
      padding-top: 18px;
      margin-bottom: 18px;
      .top {
        display: flex;
        justify-content: space-between;
        padding: 0 23px;
        .left {
          display: flex;
          .form-item {
            display: flex;
            align-items: center;
            margin-right: 15px;
            color: #fff;
            &.select-box {
              width: 300px;
            }
            &.time-box {
              width: 300px;
            }
            .label {
              color: #cbcbcb;
              flex-shrink: 0;
              font-size: 14px;
              margin-right: 3px;
            }
          }
        }
      }
    }
    .cengji-chart-box {
      width: 100%;
      height: 220px;
    }
    .right_main {
      flex: 1 1 auto;
      width: 100%;
      height: 0;
      display: flex;
      flex-direction: column;
      .right_main_top,
      .right_main_bottom {
        flex: 0 0 auto;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        background-color: #0f2245;
        .main_fenye {
          flex: 0 0 auto;
          display: flex;
          align-items: center;
          justify-content: flex-end;
          margin: 16px 20px;
        }
      }
      .right_main_bottom {
        flex: 1 1 auto;
        width: 100%;
        height: 0;
        .right_content_wrap {
          flex: 1 1 auto;
          width: 100%;
          height: 0;
          background: $modelCreatebgColor;
        }
      }
      .common_title_wrap {
        flex: 0 0 auto;
        width: 100%;
        height: 62px;
        background: linear-gradient(to bottom, #134183, #113b78);
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
        padding: 0 20px;
        .common_title_btn {
          width: 160px;
          text-align: center;
          font-size: 20px;
          height: 32px;
          line-height: 32px;
          color: #ccc;
          // background: linear-gradient(to right, #247ab7, #279cce, #247ab7);
          background: linear-gradient(to right, #1f589e, #2384b5, #1f589e);
          cursor: pointer;
          &:hover {
            opacity: 0.9;
          }
        }
        .common_title_btn_right {
          width: 160px;
          text-align: center;
          font-size: 20px;
          height: 32px;
          line-height: 32px;
          color: #ccc;
          background: linear-gradient(to right, #1f589e, #2384b5, #1f589e);
          // background: linear-gradient(to right, #247ab7, #279cce, #247ab7);
          cursor: pointer;
          &:hover {
            opacity: 0.9;
          }
        }

        .common_title_other {
          display: flex;
          align-items: center;
          .other_search_wrap {
            display: flex;
            align-items: center;
            margin-right: 100px;
            .search_name {
              color: #ccc;
              font-size: 20px;
              margin-right: 8px;
            }
          }
        }
      }
      .common_main_scrollbar_content {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        padding: 20px;
        font-size: 20px;
        color: #ccc;
        line-height: 32px;
        background: linear-gradient(to bottom, #12315e, #154173);
      }
      .duizhanbiao_table {
        width: 100%;
        height: 100%;
        .table_checkout_box {
          display: flex;
          align-items: center;
          justify-content: center;
          .icon {
            font-weight: 700;
            font-size: 18px;
          }
        }
      }
    }
  }
}
</style>
